<template>
  <basic-container>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row type="flex" class="row-bg" justify="end">
        <el-form-item>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-row>
      <el-card shadow="hover">
        <div slot="header">
          <span>审批信息</span>
        </div>
        <el-form-item label="申请人">
          <el-input :disabled="true" v-model="form.flow.assigneeName"/>
        </el-form-item>
        <el-form-item label="申请内容">
          <el-input :disabled="true" type="textarea" v-model="form.content"/>
        </el-form-item>
        <el-form-item label="申请备注">
          <el-input :disabled="true" v-model="form.comment"/>
        </el-form-item>
      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程信息</span>
        </div>
        <el-row type="flex" class="row-bg">
          <el-timeline>
            <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
              <el-card shadow="hover">
                <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-card>
      <el-card shadow="hover">
        <div slot="header">
          <span>流程跟踪</span>
        </div>
        <el-row type="flex" class="row-bg">
          <img :src="src" alt="design">
        </el-row>
      </el-card>
    </el-form>
  </basic-container>
</template>

<script>
  import {expenseDetail} from "@/api/work/expense";
  import {historyFlowList} from "@/api/work/process";
    export default {
      name: "detail",
      data(){
        return {
          taskId: '',
          businessId: '',
          processInstanceId: '',
          src: '',
          flowList: [],
          form: {
            flow: {
              assigneeName: '',
            },
            comment: '',
            content:'',
          },
          rules:{
            advise:[
              { required: true, message: '请输入审批意见', trigger: 'blur' },
            ],
          }
        }
      },
      created() {
        this.init();
      },
      methods:{
        init(){
          this.taskId = this.$route.params.taskId;
          this.processInstanceId = this.$route.params.processInstanceId;
          this.businessId = this.$route.params.businessId;
          this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}`;
          historyFlowList(this.processInstanceId).then(res => {
            const data = res.data;
            if (data.success) {
              this.flowList = data.data;
            }
          })
          expenseDetail(this.businessId).then(res => {
            const data = res.data;
            if (data.success) {
              this.form = data.data;
            }
          })
        },

        // 关闭窗口
        handleCancel() {
          this.$router.$avueRouter.closeTag();
          // this.$router.push({path: `/work/start`});
          this.$router.go(-1);
        }

      }
    }
</script>

<style scoped>

</style>
